<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 简历分析</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/candidate/resume.css" rel="stylesheet">
    <style>
        .upload-area {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            cursor: pointer;
        }
        .upload-area.highlight {
            border-color: #66afe9;
        }
        .model-selection {
            margin-top: 20px;
            display: flex;
            align-items: center;
        }
        .model-selection label {
            margin-right: 10px;
        }
        .model-selection .model-item {
            display: flex;
            align-items: center;
            margin-right: 20px;
        }
        .model-selection button {
            margin-right: 5px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        .model-selection button.selected {
            background-color: #66afe9;
            color: white;
        }
        .file-info {
            margin-top: 10px;
            color: #66afe9;
        }
        .resume-section {
            margin-top: 20px;
        }
        .resume-section h2 {
            border-bottom: 2px solid #000;
            padding-bottom: 5px;
        }
        .resume-section ul {
            list-style-type: none;
            padding: 0;
        }
        .resume-section li {
            margin: 5px 0;
        }
        .skill-item {
            margin-bottom: 10px;
        }
        .skill-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .skill-bar {
            width: 100%;
            background-color: #eee;
            border-radius: 5px;
            overflow: hidden;
        }
        .skill-progress {
            height: 20px;
            background-color: #66afe9;
        }
    </style>
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="dashboard.html">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li>
                    <a href="interview.html">
                        <i class='bx bx-video'></i>
                        <span>开始面试</span>
                    </a>
                </li>
                <li class="active">
                    <a href="resume.html">
                        <i class='bx bx-file'></i>
                        <span>简历分析</span>
                    </a>
                </li>
                <li>
                    <a href="reports.html">
                        <i class='bx bx-line-chart'></i>
                        <span>面试报告</span>
                    </a>
                </li>
                <li>
                    <a href="profile.html">
                        <i class='bx bx-user'></i>
                        <span>个人中心</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="resume-container">
                <!-- 上传区域 -->
                <div class="upload-section" id="uploadSection">
                    <div class="upload-area" id="dropZone" ondragover="handleDragOver(event)" ondrop="handleFileDrop(event)">
                        <i class='bx bx-cloud-upload'></i>
                        <h2>上传简历</h2>
                        <p>拖拽文件到此处或点击上传</p>
                        <span class="file-types">支持 PDF、Word、图片格式</span>
                        <input type="file" id="fileInput" hidden accept=".pdf,.doc,.docx,.jpg,.png" onchange="handleFileSelect(event)">
                        <button class="btn btn-primary" onclick="triggerFileInput()">
                            选择文件
                        </button>
                    </div>

                    <!-- 文件信息显示区域 -->
                    <div id="fileInfo" class="file-info" style="display: none;">
                        <p id="fileName"></p>
                        <p>已选择文件，可以上传</p>
                    </div>

                    <!-- 模型选择 -->
{#                    <div class="model-selection">#}
{#                        <label>请选择分析模型:</label>#}
{#                        <div class="model-item">#}
{#                            <button class="btn btn-secondary" onclick="selectModel('deepseek-r1')">DeepSeek-R1</button>#}
{#                            <span>DeepSeek-R1</span>#}
{#                        </div>#}
{#                        <div class="model-item">#}
{#                            <button class="btn btn-secondary" onclick="selectModel('智谱清言ChatGLM2')">智谱清言ChatGLM2</button>#}
{#                            <span>智谱清言ChatGLM2</span>#}
{#                        </div>#}
{#                    </div>#}

                    <!-- 上传按钮 -->
                    <button class="btn btn-primary" onclick="uploadResume()">上传简历</button>
                </div>

                <!-- 分析结果 -->
                <div class="analysis-section" id="analysisResult" style="display: none;">
                    <!-- 动态生成的内容将放在这里 -->
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let selectedModel = null;

        function triggerFileInput() {
            document.getElementById('fileInput').click();
        }

        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (file) {
                displayFileName(file.name);
                console.log('File selected:', file.name, 'Size:', file.size);  // 调试信息
            }
        }

        function handleFileDrop(event) {
            event.preventDefault();
            event.stopPropagation();
            document.getElementById('dropZone').classList.remove('highlight');

            const file = event.dataTransfer.files[0];
            if (file) {
                displayFileName(file.name);
                console.log('File dropped:', file.name, 'Size:', file.size);  // 调试信息
            }
        }

        function handleDragOver(event) {
            event.preventDefault();
            event.stopPropagation();
            document.getElementById('dropZone').classList.add('highlight');
        }

        function displayFileName(fileName) {
            const fileInfo = document.getElementById('fileInfo');
            const fileNameElement = document.getElementById('fileName');
            fileNameElement.textContent = `文件名: ${fileName}`;
            fileInfo.style.display = 'block';
        }

        function selectModel(modelName) {
            // 移除所有选中状态
            const buttons = document.querySelectorAll('.model-selection button');
            buttons.forEach(button => button.classList.remove('selected'));

            // 设置当前按钮为选中状态
            const selectedButton = document.querySelector(`.model-selection button[onclick="selectModel('${modelName}')"]`);
            selectedButton.classList.add('selected');

            selectedModel = modelName;
            console.log('Selected model:', selectedModel);  // 调试信息
        }

        function uploadResume() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];
            if (!file) {
                alert('请先选择一个文件');
                return;
            }

            // 弹窗提醒上传可能需要大约20秒
            alert('上传可能需要大约20秒左右，请耐心等待。');

            const formData = new FormData();
            formData.append('file', file);

            fetch('/api/upload_resume', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('文件上传成功');
                    // 显示文件的绝对路径
                    document.getElementById('fileName').textContent = `文件路径: ${data.file_url}`;
                    // 显示分析结果
                    displayAnalysisResult(data.resume_data);
                } else {
                    alert('文件上传失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('上传文件时出错:', error);
                alert('文件上传失败');
            });
        }

        function reupload() {
            document.getElementById('fileInput').value = '';
            document.getElementById('analysisResult').style.display = 'none';
            document.getElementById('fileInfo').style.display = 'none';
        }

        function displayAnalysisResult(resumeData) {
            const analysisResult = document.getElementById('analysisResult');
            analysisResult.style.display = 'block';
            analysisResult.innerHTML = '';  // 清空之前的分析结果

            for (const [section, data] of Object.entries(resumeData)) {
                const sectionDiv = document.createElement('div');
                sectionDiv.className = 'resume-section';

                const sectionTitle = document.createElement('h2');
                sectionTitle.textContent = section;
                sectionDiv.appendChild(sectionTitle);

                if (typeof data === 'object' && !Array.isArray(data)) {
                    // 处理对象
                    for (const [key, value] of Object.entries(data)) {
                        const itemDiv = document.createElement('div');
                        itemDiv.className = 'info-item';

                        const labelSpan = document.createElement('span');
                        labelSpan.className = 'label';
                        labelSpan.textContent = key;
                        itemDiv.appendChild(labelSpan);

                        const valueSpan = document.createElement('span');
                        valueSpan.className = 'value';
                        if (typeof value === 'object' && !Array.isArray(value)) {
                            valueSpan.innerHTML = generateNestedObjectHTML(value);
                        } else if (Array.isArray(value)) {
                            valueSpan.innerHTML = generateArrayHTML(value);
                        } else {
                            valueSpan.textContent = value;
                        }
                        itemDiv.appendChild(valueSpan);

                        sectionDiv.appendChild(itemDiv);
                    }
                } else if (Array.isArray(data)) {
                    // 处理数组
                    const ul = document.createElement('ul');
                    data.forEach(item => {
                        const li = document.createElement('li');
                        if (typeof item === 'object' && !Array.isArray(item)) {
                            li.innerHTML = generateNestedObjectHTML(item);
                        } else {
                            li.textContent = item;
                        }
                        ul.appendChild(li);
                    });
                    sectionDiv.appendChild(ul);
                } else {
                    // 处理其他类型
                    const itemDiv = document.createElement('div');
                    itemDiv.className = 'info-item';

                    const labelSpan = document.createElement('span');
                    labelSpan.className = 'label';
                    labelSpan.textContent = section;
                    itemDiv.appendChild(labelSpan);

                    const valueSpan = document.createElement('span');
                    valueSpan.className = 'value';
                    valueSpan.textContent = data;
                    itemDiv.appendChild(valueSpan);

                    sectionDiv.appendChild(itemDiv);
                }

                analysisResult.appendChild(sectionDiv);
            }

            // 添加“点击分析简历”按钮
            const analyzeButton = document.createElement('button');
            analyzeButton.className = 'btn btn-primary';
            analyzeButton.textContent = '点击分析简历';
            analyzeButton.href = '';  // 设置为空，后续可以修改
            analyzeButton.onclick = function() {
                // 这里可以添加点击按钮后的逻辑
               window.location.href = '/applicant/analyze_resume';
                alert('点击了分析简历按钮');
            };
            analysisResult.appendChild(analyzeButton);
        }

        function generateNestedObjectHTML(obj) {
            let html = '<ul>';
            for (const [key, value] of Object.entries(obj)) {
                html += `<li><strong>${key}:</strong> `;
                if (typeof value === 'object' && !Array.isArray(value)) {
                    html += generateNestedObjectHTML(value);
                } else if (Array.isArray(value)) {
                    html += generateArrayHTML(value);
                } else {
                    html += value;
                }
                html += '</li>';
            }
            html += '</ul>';
            return html;
        }

        function generateArrayHTML(arr) {
            let html = '<ul>';
            arr.forEach(item => {
                html += '<li>';
                if (typeof item === 'object' && !Array.isArray(item)) {
                    html += generateNestedObjectHTML(item);
                } else if (Array.isArray(item)) {
                    html += generateArrayHTML(item);
                } else {
                    html += item;
                }
                html += '</li>';
            });
            html += '</ul>';
            return html;
        }
    </script>
</body>
</html>
